<template>
	<div class="login-register-container">
		<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
			<el-tab-pane label="登录" name="login">
				<el-form :model="loginForm" :rules="loginRules" ref="loginForm" @submit.native.prevent="handleLogin"
					label-width="80px">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" native-type="submit">登录</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="注册" name="register">
				<el-form :model="registerForm" :rules="registerRules" ref="registerForm"
					@submit.native.prevent="handleRegister" label-width="80px">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirmPassword">
						<el-input type="password" v-model="registerForm.confirmPassword"
							placeholder="请再次输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" native-type="submit">注册</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import instance from "../axios/index.js"

	export default {
		data() {
			const validatePassword = (rule, value, callback) => {
				if (value !== this.registerForm.password) {
					callback(new Error('两次输入的密码不一致'));
				} else {
					callback();
				}
			};

			return {
				activeTab: 'login',
				loginForm: {
					email: '',
					password: ''
				},
				registerForm: {
					email: '',
					password: '',
					confirmPassword: ''
				},
				loginRules: {
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				registerRules: {
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: 'blur'
						},
						{
							validator: validatePassword,
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			async handleLogin() {
				try {
					const valid = await this.$refs.loginForm.validate();
					if (!valid) return;

					// 移除测试用的硬编码验证
					const {
						email,
						password
					} = this.loginForm;
					
					const res = await instance.post('/api/users/login', {
						email,
						password
					});
					console.log(res);
					// 假设返回数据结构为 { code: 200, data: { token: 'xxx' }, message: '登录成功' }
					if (res.status === 200) {
						this.$message.success(res.message);
						this.$router.push('/mainPage');
					} else {
						this.$message.error(res.message || '登录失败');
					}
				} catch (error) {
					console.error('详细错误:', error);
	
				}
			},

			async handleRegister() {
			    try {
			        const valid = await this.$refs.registerForm.validate();
			        if (!valid) return;
			
			        const { email, password } = this.registerForm;
			        const res = await instance.post('/api/auth/register', {
			            email,
			            password
			        });
			
			        // 保持与登录一致的响应状态码检查
			        if (res.status === 200) {
			            this.$message.success(res.message);
			            this.activeTab = 'login';                // 切换到登录标签页
			            this.registerForm = {                    // 清空注册表单
			                email: '',
			                password: '',
			                confirmPassword: ''
			            };
			        } else {
			            this.$message.error(res.message || '注册失败');
			        }
			    } catch (error) {
			        console.error('注册错误:', error);            // 与登录保持一致的错误打印
			        // this.$message.error(error.message || '注册请求失败'); // 移除前端提示
			    }
			},

			handleTabClick(tab) {
				this.activeTab = tab.name;
			}
		}
	};
</script>
<style scoped>
	.login-register-container {
		max-width: 560px;
		margin: 80px auto;
		padding: 40px 40px 30px;
		background-color: #ffffff;
		border: 1px solid #e0e0e0;
		border-radius: 0;
		box-shadow: none;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.el-tabs__item {
		font-size: 16px;
		padding: 12px 20px;
	}

	.el-form-item {
		margin-bottom: 24px;
	}

	.el-form-item__label {
		font-weight: 500;
		color: #333;
		font-size: 14px;
	}

	.el-input__inner {
		border-radius: 0;
		border-color: #ccc;
		height: 40px;
		font-size: 14px;
	}

	.el-input__inner:focus {
		border-color: #409EFF;
		box-shadow: none;
	}

	.el-button {
		width: 100%;
		height: 42px;
		font-size: 15px;
		border-radius: 0;
		background-color: #409EFF;
		border-color: #409EFF;
	}

	.el-button:hover {
		background-color: #66b1ff;
		border-color: #66b1ff;
	}

	.el-form {
		margin-top: 20px;
	}
</style>